<script setup lang="ts">
import type { PopoverAction } from 'vant'
import { ref } from 'vue'
const props = defineProps<{
  disabled: boolean
}>()

// 更多弹层的显示隐藏
const showPopover = ref(false)
// actions定义Popover的选项
const actions = [
  { text: '查看处方', disabled: props.disabled },
  { text: '删除订单' }
]

const emit = defineEmits<{
  (e: 'on-delete'): void
  (e: 'on-preview'): void
}>()

// 点击更多里面的按钮操作
const onSelect = (action: PopoverAction, index: number) => {
  if (index === 1) {
    // 删除订单操作
    emit('on-delete')
  }
  if (index === 0) {
    // 查看处方
    emit('on-preview')
  }
}
</script>

<template>
  <div class="more">
    <van-popover
      @select="onSelect"
      v-model:show="showPopover"
      :actions="actions"
      placement="top-start"
    >
      <template #reference>
        <span>更多</span>
      </template>
    </van-popover>
  </div>
</template>

<style scoped lang="scss">
.more {
  color: var(--cp-tag);
  flex: 1;
  font-size: 13px;
}
</style>
